<template>
    <el-dialog :visible.sync="isShow" :title="headerTitle" @close="handleClose" center top="14vh" width="400px" append-to-body :fullscreen="fullscreen">
        <el-form :model="dialogForm" size="small" label-suffix=":" ref="detailForm" :rules="rules" label-width="100px">
            <!-- 供应商编号 -->
            <el-form-item :label="$t('basicData.supplierNo')" prop="supplierCode">
                <el-input v-model="dialogForm.supplierCode" :disabled="type === 2" :placeholder="$t('public.placeholder',{placeholder:$t('basicData.supplierNo')})" size="small" clearable />
            </el-form-item>
            <!-- 供应商名称 -->
            <el-form-item :label="$t('basicData.supplierName')" prop="supplierName">
                <el-input v-model="dialogForm.supplierName" :disabled="type === 2" :placeholder="$t('public.placeholder',{placeholder:$t('basicData.supplierName')})" size="small" clearable />
            </el-form-item>
            <!--              供应商类型-->
            <el-form-item :label="$t('basicData.supplierType')" prop="supplierCategory">
                <el-select style="width:100%" v-model="dialogForm.supplierCategory" :placeholder="$t('public.selectPl')+$t('basicData.supplierType')">
                    <el-option v-for="dict in dict.type.NYIQC_SUPPLIER_TYPE" :key="dict.value" :label="dict.label" :value="dict.label" />
                </el-select>
            </el-form-item>
            <!-- 描述 -->
            <el-form-item :label="$t('basicData.description')" prop="remark">
                <el-input type="textarea" v-model="dialogForm.remark"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm" :loading="loading" icon="el-icon-document" size="small">{{$t('public.save')}}</el-button>
        </div>
    </el-dialog>
</template>
<script>
import {addSupplier, updateSupplier} from '@/api/basic/supplier'

export default {
    name: 'mtool-detial',
    dicts: [
        'NYIQC_SUPPLIER_TYPE', //供应商类型
    ],
    props: {
        value: {
            type: Object,
        },
        visible: {
            type: Boolean,
            default: false,
        },
        type: [String, Number], //1:新增  2：编辑 3：查看
    },
    watch: {
        value(val) {
            this.dialogForm = { ...val }
        },
    },
    computed: {
        isShow: {
            get() {
                return this.visible
            },
            set() {},
        },
        headerTitle() {
            const { type } = this
            let title = ''
            if (type == 1) {
                title =
                    this.$t('public.add') +
                    ' ' +
                    this.$t('basicData.supplierInfo')
            }
            if (type == 2) {
                title =
                    this.$t('public.edit') +
                    ' ' +
                    this.$t('basicData.supplierInfo')
            }
            // if(type == 3){
            //   title = this.$t('mtool.viewHeader')
            // }
            return title
        },
    },
    data() {
        return {
            loading: false,
            fullscreen: false,
            deviceOptions: undefined,
            supplierOptions: undefined,
            dialogForm: {},
            // 表单校验
            rules: {
                supplierCode: [
                    {
                        required: true,
                        message: '供应商编号不能为空',
                        trigger: 'blur',
                    },
                ],
                supplierCategory: [
                    {
                        required: true,
                        message: '供应商类型不能为空',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    methods: {
        /** 发起提交 */
        submitForm: function () {
            this.loading = true
            this.$refs.detailForm.validate((valid) => {
                if (valid) {
                    let action = this.type === 1 ? addSupplier : updateSupplier
                    action(this.dialogForm)
                        .then((res) => {
                            this.loading = false
                            if (res.code == 200) {
                                this.$emit('refresh')
                                this.$modal.msgSuccess('操作成功!')
                                this.$emit('update:visible', false)
                            } else {
                                this.$modal.msgError(res.msg)
                                this.loading = false
                            }
                        })
                        .catch((err) => {
                            this.loading = false
                        })
                }
            })
        },
        handleClose(done) {
            this.$emit('update:visible', false)
            this.dialogForm = {}
        },
    },
}
</script>

<style scoped>
</style>
